<template>
  <div class="dream-detail">
    <nav-bar></nav-bar>
    <div class="dream-page">
      <div class="top clearfix">
        <div class="left">
          <img :src="data.image_url"/>
        </div>
        <div class="right">
          <div class="info-card">
            <div class="title">{{data.title}}</div>
            <div class="money">¥{{data.price}}</div>
            <div class="progress-contaier"><el-progress v-if="data.sold && data.rest" :percentage="data.sold / (data.sold + data.rest) * 100" :show-text="false"></el-progress></div>
            <div class="ic-item">共需：{{data.sold + data.rest}}次</div>
            <div class="ic-item">参与：{{data.sold}}次</div>
            <div class="ic-item">剩余：{{data.rest}}次</div>
            <div class="ic-item">说明：凡参与者晓语典均为您赠送同等价值语点，可多次
            参与，每次参与系统将为您生成一个圆梦号；此项目参与
            满{{data.sold + data.rest}}次后，系统从参与圆梦号中将自动抽奖并公布圆
            梦揭晓。</div>
            <div class="btn-group">
              <button class="yellow2-btn" @click="handleBuy">立即圆梦</button>
              <button class="green-btn" @click="getMyCode">我的圆梦号</button>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom clearfix">
        <div class="left">
          <div class="xyd-container">
            <div class="xyd-c-title clearfix">
              <span class="select">
                <el-radio-group v-model="radio1">
                  <el-radio-button label="商品介绍"></el-radio-button>
                  <el-radio-button label="圆梦记录"></el-radio-button>
                  <el-radio-button label="圆梦揭晓"></el-radio-button>
                </el-radio-group>
              </span>
            </div>
            <div class="xyd-c-content">
              <div class="r1" v-if="radio1 == '商品介绍'">
                {{data.intro}}
              </div>
              <div class="r2" v-if="radio1 == '圆梦记录'">
                <ul class="bottom">
                  <li v-for="item,i in data.deal" :key="i">
                    <div class="content">
                      <div class="img-container">
                        <img :src="item.buyer__avatar"/>
                      </div>
                      <span class="name">{{item.buyer__username}}</span>
                      <span class="time">参与时间：{{item.create_time}}</span>
                      <span class="code">圆梦号：{{item.dream_code}}</span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="r3" v-if="radio1 == '圆梦揭晓'">
                <div v-if="data.result">
                  <div class="top">
                    <div class="title clearfix">
                      <span class="l">本商品圆梦号</span>
                      <span class="r">圆梦号揭晓时间：{{data.result.publish_time}}</span>
                    </div>
                    <div class="content">{{data.result.dream_code}}</div>
                  </div>
                  <ul class="bottom">
                    <li >
                      <div class="title">恭喜<span style="color:#00A2EA">{{data.result.buyer__username}}</span>圆梦成功</div>
                      <div class="content">
                        <div class="img-container">
                          <img :src="data.result.buyer__avatar"/>
                        </div>
                        <span class="name">{{data.result.buyer__username}}</span>
                        <span class="time">参与时间：{{data.result.create_time}}</span>
                        <span class="code">圆梦号：{{data.result.dream_code}}</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div v-if="!data.result">
                  还未揭晓
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="xyd-container">
            <div class="xyd-c-title clearfix">
              <span>我参与的</span>
              <a href="#/mall/my-dream">更多</a>
            </div>
            <div class="xyd-c-content">
              <ul class="my-list">
                <li class="my-item" v-for="item,i in data.mydeal" :key="i">
                  <div class="img"><img :src="item.image_url"/></div>
                  <div class="text">{{item.title}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="showDialog">
      <div class="dialog-container">
        <div class="money">
          <div class="normal">
            <div class="t">我的语点</div>
            <div class="b">{{$store.state.money.normal}}</div>
          </div>
          <div class="diamond">
            <div class="t">我的钻石语点</div>
            <div class="b">{{$store.state.money.diamond}}</div>
          </div>
        </div>
        <div class="notice">
          语点不足，请选择其他支付方式
        </div>
        <div class="radios">
          <el-radio-group v-model="pay">
            <el-radio class="ri" :label="1">充值钻石语点</el-radio>
            <el-radio class="ri" :label="2">支付宝支付</el-radio>
            <el-radio class="ri" :label="3">微信支付</el-radio>
          </el-radio-group>
        </div>
        <div class="btn-group">
          <button class="gray-btn">取消</button>
          <button class="common-btn">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getDreamDetail, buyDream, getMyDCode } from 'api/dream'
import dream from '@/assets/mock_images/dream.png'


export default {
  name: 'dreamDetail',
  components: {
    NavBar
  },
  data() {
    return {
      dream,
      data: {},
      radio1: '商品介绍',
      showDialog: false,
      pay: ''
    }
  },
  created() {
    const { id } = this.$route.params
    getDreamDetail({
      item: id
    })
    .then(res => {
      console.log(res)
      this.data = res.data
    })
    .catch(err => console.log(err))
  },
  methods: {
    handleBuy() {
      const { id } = this.$route.params
      this.$store.dispatch('CheckMoney', { diamond: this.data.price })
      .then(res => {
        if (res) {
          buyDream({
            item: id
          })
          .then(res => {
            this.$message({
              message: '参与圆梦成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message({
              message: '参与圆梦失败：' + err.msg,
              type: 'error'
            })
          })
        } else {
          this.showDialog = true
        }
      })
      .catch(err => {
        console.log('获取不了财务信息：' + err)
      })
    },
    getMyCode() {
      const { id } = this.$route.params
      getMyDCode({
        item: id
      })
      .then(res => console.log(res))
      .catch(err => console.log(err))
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dream-detail{
  .dream-page{
    width: 1200px;
    margin: 0 auto;
    .top{
      margin-bottom: 30px;
      .left{
        float: left;
        width: 796px;
        height: 372px;
        margin-right: 24px;
        overflow: hidden;
        >img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        float: left;
        width: 380px;
        .info-card{
          width: 100%;
          height: 372px;
          background-color: #f4f4f4;
          padding: 15px;
          .title{
            font-size: 18px;
            font-weight: bold;
            width: 100%;
            word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
            overflow: hidden;//溢出隐藏
            text-overflow: ellipsis;//省略号
            white-space: nowrap;//不换行
          }
          .money{
            font-size: 22px;
            font-weight: 500;
            color: #EF6401;
            margin: 10px 0;
          }
          .progress-contaier{
            margin-bottom: 10px;
          }
          .ic-item{
            line-height: 24px;
          }
          .btn-group{
            padding: 33px;
            >button{
              width: 100px;
              &.yellow2-btn{
                margin-right: 67px;
              }
            }
          }
        }
      }
    }
    .bottom{
      .left{
        float: left;
        width: 796px;
        margin-right: 24px;
        .xyd-container{
          .xyd-c-title{
            .select{
              float: left;
              margin-left: 20px;
              >label{
                vertical-align: middle;
              }
            }
          }
          .xyd-c-content{
            padding: 20px;
            .r2, .r3{
              .top{
                .title{
                  .l{
                    float: left;
                  }
                  .r{
                    float: right;
                    color: #999;
                  }
                }
                .content{
                  text-align: center;
                  font-size: 24px;
                  font-weight: bold;
                  line-height: 100px;
                  border-bottom: 1px solid #e5e6e7;
                }
              }
              .bottom{
                >li{
                  .title{

                  }
                  .content{
                    line-height: 40px;
                    margin: 20px 0;
                    .img-container{
                      display: inline-block;
                      vertical-align: middle;
                      width: 40px;
                      height: 40px;
                      overflow: hidden;
                      border-radius: 20px;
                      img{
                        width: 40px;
                        height: 100%;
                      }
                    }
                    .name{
                      width: 140px;
                      word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
                      overflow: hidden;//溢出隐藏
                      text-overflow: ellipsis;//省略号
                      white-space: nowrap;//不换行
                    }
                    .time{
                      color: #999;
                      margin-left: 120px;
                    }
                    .code{
                      color: #999;
                      margin-left: 140px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .right{
        float: left;
        width: 380px;
        .xyd-container{
          .xyd-c-title{
            padding: 0 20px;
            >span{
              float: left;
            }
            >a{
              font-size: 12px;
              float: right;
              color: #999;
            }
          }
          .xyd-c-content{
            >ul{
              padding: 5px;
              >li{
                padding: 10px 0;
                .img{
                  width: 100%;
                  img{
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.dialog-container{
  .money{
    width: 570px;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    .normal{
      float: left;
      width: 275px;
      height: 150px;
      margin-right: 20px;
      background-color: #46B7AF;
      padding: 45px 0;
      text-align: center;
      .t{

      }
      .b{
        font-size: 30px;
      }
    }
    .diamond{
      float: left;
      width: 275px;
      height: 150px;
      background-color: #F8CB00;
      padding: 45px 0;
      text-align: center;
      .b{
        font-size: 30px;
      }
    }
  }
  .notice{
    color: #f00;
    font-size: 12px;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #e5e6e7;
  }
  .radios{
    padding: 20px 0;
    .ri{
      display: block;
      line-height: 30px;
      margin-left: 0;
    }
  }
  .btn-group{
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    .gray-btn{
      margin-right: 38px;
    }
    >button{
      float: left;
      height: 38px;
      width: 161px;
    }
  }
}
</style>